@keyframes shadow-inset-center {
    0% {
      box-shadow: inset 0 0 0 0 transparent;
    }
    to {
      box-shadow: inset 0 0 14px 0 rgb(0 0 0/50%);
    }
  }
  @keyframes shadow-pop-tr {
    0% {
      box-shadow: 0 0 rgba(62, 62, 62, 0.18), 0 0 rgba(62, 62, 62, 0.18),
        0 0 rgba(62, 62, 62, 0.18), 0 0 rgba(62, 62, 62, 0.18),
        0 0 rgba(62, 62, 62, 0.18), 0 0 rgba(62, 62, 62, 0.18),
        0 0 rgba(62, 62, 62, 0.18), 0 0 rgba(62, 62, 62, 0.18);
      transform: translateX(0) translateY(0);
    }
    to {
      box-shadow: 1px -1px rgba(62, 62, 62, 0.18), 2px -2px rgba(62, 62, 62, 0.18),
        3px -3px rgba(62, 62, 62, 0.18), 4px -4px rgba(62, 62, 62, 0.18),
        5px -5px rgba(62, 62, 62, 0.18), 6px -6px rgba(62, 62, 62, 0.18),
        7px -7px rgba(62, 62, 62, 0.18), 8px -8px rgba(62, 62, 62, 0.18);
      transform: translateX(-8px) translateY(8px);
    }
  }
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
    @keyframes fade-out {
        0% {
        opacity: 1;
        }
        100% {
        opacity: 0;
        }
    }
    @keyframes fade-in-bottom {
        0% {
        opacity: 0;
        transform: translateY(20px);
        }
        100% {
        opacity: 1;
        transform: translateY(0);
        }
    }
    @keyframes fade-in-top {
        0% {
        opacity: 0;
        transform: translateY(-20px);
        }
        100% {
        opacity: 1;
        transform: translateY(0);
        }
    }
    @keyframes fade-in-left {
        0% {
        opacity: 0;
        transform: translateX(-20px);
        }
        100% {
        opacity: 1;
        transform: translateX(0);
        }
    }
    @keyframes fade-in-right {
        0% {
        opacity: 0;
        transform: translateX(20px);
        }
        100% {
        opacity: 1;
        transform: translateX(0);
        }
    }
    @keyframes fade-out-bottom {
        0% {
        opacity: 1;
        transform: translateY(0);
        }
        100% {
        opacity: 0;
        transform: translateY(20px);
        }
    }
    @keyframes fade-out-top {
        0% {
        opacity: 1;
        transform: translateY(0);
        }
        100% {
        opacity: 0;
        transform: translateY(-20px);
        }
    }
    @keyframes fade-out-left {
        0% {
        opacity: 1;
        transform: translateX(0);
        }
        100% {
        opacity: 0;
        transform: translateX(-20px);
        }
    }
    @keyframes fade-out-right {
        0% {
        opacity: 1;
        transform: translateX(0);
        }
        100% {
        opacity: 0;
        transform: translateX(20px);
        }
    }  
    @keyframes slide-in-bottom {
        0% {
        opacity: 0;
        transform: translateY(100px);
        }
        100% {
        opacity: 1;
        transform: translateY(0);
        }
    }
    @keyframes slide-in-top {
        0% {
        opacity: 0;
        transform: translateY(-100px);
        }
        100% {
        opacity: 1;
        transform: translateY(0);
        }
    }
    @keyframes slide-in-left {
        0% {
        opacity: 0;
        transform: translateX(-100px);
        }
        100% {
        opacity: 1;
        transform: translateX(0);
        }
    }
    @keyframes slide-in-right {
        0% {
        opacity: 0;
        transform: translateX(100px);
        }
        100% {
        opacity: 1;
        transform: translateX(0);
        }
    }
    @keyframes slide-out-bottom {
        0% {
        opacity: 1;
        transform: translateY(0);
        }
        100% {
        opacity: 0;
        transform: translateY(100px);
        }
    }
    @keyframes slide-out-top {
        0% {
        opacity: 1;
        transform: translateY(0);
        }
        100% {
        opacity: 0;
        transform: translateY(-100px);
        }
    }
    @keyframes slide-out-left {
        0% {
        opacity: 1;
        transform: translateX(0);
        }
        100% {
        opacity: 0;
        transform: translateX(-100px);
        }
    }
    @keyframes slide-out-right {
        0% {
        opacity: 1;
        transform: translateX(0);
        }
        100% {
        opacity: 0;
        transform: translateX(100px);
        }
    }
    @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    @keyframes rotate-back {
            0% {
            transform: rotate(360deg);
            }
            100% {
            transform: rotate(0deg);
            }
        }
    @keyframes scale-in-center {
            0% {
            transform: scale(0);
            opacity: 1;
            }
            100% {
            transform: scale(1);
            opacity: 1;
            }
        }
    @keyframes scale-out-center {
            0% {
            transform: scale(1);
            opacity: 1;
            }
            100% {
            transform: scale(0);
            opacity: 1;
            }
        }
    @keyframes scale {
            0% {
              transform: scale(1);
            }
            50% {
              transform: scale(1.5);
            }
            100% {
              transform: scale(1);
            }
          }
    @keyframes scale-back {
                0% {
                transform: scale(1.5);
                }
                100% {
                transform: scale(1);
                }
            }
    @keyframes scale-up-center {
                0% {
                transform: scale(0);
                }
                100% {
                transform: scale(1);
                }
            }
    @keyframes pulse {
                0% {
                  transform: scale(1);
                }
                50% {
                  transform: scale(1.1);
                }
                100% {
                  transform: scale(1);
                }
              }
    @keyframes bounce {
                0%, 20%, 50%, 80%, 100% {
                  transform: translateY(0);
                }
                40% {
                  transform: translateY(-30px);
                }
                60% {
                  transform: translateY(-15px);
                }
    }
    @keyframes shake {
                0% {
                  transform: translateX(0);
                }
                10%, 30%, 50%, 70%, 90% {
                  transform: translateX(-10px);
                }
                20%, 40%, 60%, 80% {
                  transform: translateX(10px);
                }
    }
    @keyframes flip {
                0% {
                  transform: rotateY(0deg);
                }
                50% {
                  transform: rotateY(180deg);
                }
                100% {
                  transform: rotateY(360deg);
                }
    }
    @keyframes flip-back {
                0% {
                  transform: rotateY(180deg);
                }
                50% {
                  transform: rotateY(360deg);
                }
                100% {
                  transform: rotateY(0deg);
                }
    }
    @keyframes zoom-in {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
      }
    @keyframes zoom-out {
        0% { transform: scale(1); }
        100% { transform: scale(0); }
    }
    @keyframes zoom-in-up {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
    }
    @keyframes zoom-out-up {
        0% { transform: scale(1); }
        100% { transform: scale(0); }
    }
    @keyframes zoom-in-down {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
    }
    @keyframes zoom-out-down {
        0% { transform: scale(1); }
        100% { transform: scale(0); }
    }
    @keyframes zoom-in-left {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
    }
    @keyframes zoom-out-left {
        0% { transform: scale(1); }
        100% { transform: scale(0); }
    }
    @keyframes zoom-in-right {
        0% { transform: scale(0); }
        100% { transform: scale(1); }
    }
    @keyframes zoom-out-right {
        0% { transform: scale(1); }
        100% { transform: scale(0); }
    }
    @keyframes bounce-in {
        0% {
          transform: scale(0.1);
          opacity: 0;
        }
        60% {
          transform: scale(1.2);
          opacity: 1;
        }
        100% {
          transform: scale(1);
        }
      }
    @keyframes bounce-out {
        0% {
          transform: scale(1);
        }
        25% {
          transform: scale(0.95);
        }
        50% {
          opacity: 1;
          transform: scale(1.1);
        }
        100% {
          opacity: 0;
          transform: scale(0.3);
        }
      }
    @keyframes bounce-in-up {
        0% {
          transform: translateY(500px);
          animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          transform: translateY(-20px);
          animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          transform: translateY(10px);
          animation-timing-function: ease-in;
        }
        72% {
          transform: translateY(-5px);
          animation-timing-function: ease-out;
        }
        81% {
          transform: translateY(2px);
          animation-timing-function: ease-in;
        }
        90% {
          transform: translateY(-1px);
          animation-timing-function: ease-out;
        }
        95% {
          transform: translateY(0px);
          animation-timing-function: ease-in;
        }
        100% {
          transform: translateY(0px);
          animation-timing-function: ease-out;
        }
    }
    @keyframes bounce-out-up {
        20% {
          transform: translateY(10px);
        }
        40%, 45% {
          opacity: 1;
          transform: translateY(-20px);
        }
        100% {
          opacity: 0;
          transform: translateY(500px);
        }
    }
    @keyframes bounce-in-down {
        0% {
          transform: translateY(-500px);
          animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          transform: translateY(20px);
          animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          transform: translateY(-10px);
          animation-timing-function: ease-in;
        }
        72% {
          transform: translateY(5px);
          animation-timing-function: ease-out;
        }
        81% {
          transform: translateY(-2px);
          animation-timing-function: ease-in;
        }
        90% {
          transform: translateY(1px);
          animation-timing-function: ease-out;
        }
        95% {
          transform: translateY(0px);
          animation-timing-function: ease-in;
        }
        100% {
          transform: translateY(0px);
          animation-timing-function: ease-out;
        }
    }
    @keyframes bounce-out-down {
        20% {
          transform: translateY(-10px);
        }
        40%, 45% {
          opacity: 1;
          transform: translateY(20px);
        }
        100% {
          opacity: 0;
          transform: translateY(-500px);
        }
    }
    @keyframes bounce-in-left {
        0% {
          transform: translateX(-500px);
          animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          transform: translateX(20px);
          animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          transform: translateX(-10px);
          animation-timing-function: ease-in;
        }
        72% {
          transform: translateX(5px);
          animation-timing-function: ease-out;
        }
        81% {
          transform: translateX(-2px);
          animation-timing-function: ease-in;
        }
        90% {
          transform: translateX(1px);
          animation-timing-function: ease-out;
        }
        95% {
          transform: translateX(0px);
          animation-timing-function: ease-in;
        }
        100% {
          transform: translateX(0px);
          animation-timing-function: ease-out;
        }
    }
    @keyframes bounce-out-left {
        20% {
          transform: translateX(10px);
        }
        40%, 45% {
          opacity: 1;
          transform: translateX(-20px);
        }
        100% {
          opacity: 0;
          transform: translateX(-500px);
        }
    }
    @keyframes bounce-in-right {
        0% {
          transform: translateX(500px);
          animation-timing-function: ease-in;
          opacity: 0;
        }
        38% {
          transform: translateX(-20px);
          animation-timing-function: ease-out;
          opacity: 1;
        }
        55% {
          transform: translateX(10px);
          animation-timing-function: ease-in;
        }
        72% {
          transform: translateX(-5px);
          animation-timing-function: ease-out;
        }
        81% {
          transform: translateX(2px);
          animation-timing-function: ease-in;
        }
        90% {
          transform: translateX(-1px);
          animation-timing-function: ease-out;
        }
        95% {
          transform: translateX(0px);
          animation-timing-function: ease-in;
        }
        100% {
          transform: translateX(0px);
          animation-timing-function: ease-out;
        }
    }
    @keyframes bounce-out-right {
        20% {
          transform: translateX(-10px);
        }
        40%, 45% {
          opacity: 1;
          transform: translateX(20px);
        }
        100% {
          opacity: 0;
          transform: translateX(500px);
        }
    }
    @keyframes bounce-in-up-big {
        0% {
          transform: translateY(2000px);
          animation-timing-function: ease-in;
          opacity: 0;
        }
        40% {
          transform: translateY(-30px);
          animation-timing-function: ease-out;
          opacity: 1;
        }
        60% {
          transform: translateY(15px);
          animation-timing-function: ease-in;
        }
        80% {
          transform: translateY(-7.5px);
          animation-timing-function: ease-out;
        }
        90% {
          transform: translateY(3px);
          animation-timing-function: ease-in;
        }
        95% {
          transform: translateY(-1.5px);
          animation-timing-function: ease-out;
        }
        100% {
          transform: translateY(0px);
          animation-timing-function: ease-in;
        }
    }